<!--
 * @Author: your name
 * @Date: 2021-11-04 21:50:30
 * @LastEditTime: 2021-11-07 11:15:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-app2\src\views\Menu.vue
-->
<template>
    <!-- 导航栏 -->
    <van-nav-bar
        title="服务产品"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
    <van-row gutter="15">
        <van-col span="8">
            <!-- 侧边导航 -->
            <van-sidebar v-model="index">
                <van-sidebar-item v-for="item in category_data" :key="item.id" :title="item.name" @click="getDateList(item.id)"/>
            </van-sidebar>
        </van-col>
        <!-- 右侧详情页 -->
        <van-col span="16">
            <van-card
                v-for="item in data_lists"
                :key="item.id"
                :num="item.number"
                :price="item.price"
                :desc="item.description"
                :title="item.name"
                :thumb="item.photo"
            >
            <!--  购买数量  更改时重新计算总价  -->
                <template #footer>
                    <van-stepper
                        v-model="item.number"
                        theme="round"
                        min="0"
                        button-size="22"
                        disable-input
                        default-value="0"
                        @click="update_sum(item)"
                    />
                </template>
            </van-card>
            <!-- id:{{index}} -->

        </van-col>
        <!-- {{orderLines}} -->
        <!-- 提交订单 -->
        <van-submit-bar :price="sum" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
            <template #tip>
                你的订单地址不支持服务, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>
    </van-row>
        
</template>

<script>
import { Toast } from 'vant';
import {ref} from "vue";
import { get } from '../utils/axios';

export default {
    
    setup() {
        const onClickLeft = () => history.back();
        const onClickRight = () => Toast('按钮');

        // 提交订单
        const onSubmit = () => Toast('点击按钮');
        const onClickLink = () => Toast('修改地址');

        return {
            onClickLeft,
            onClickRight,
            onSubmit,
            onClickLink,
        };
    },

    data(){
        return{
            category_data:{},//服务分类
            data_lists:[],//详细数据
            index:this.$route.query.index,//显示的项的索引
            sum:0,//计算总价
            orderLines:{},//订单列表
        }
    },

    methods:{
        // 获取左侧列表服务分类数据
        getCateData(){
            get('/productCategory/pageQuery',{page:1,pageSize:999}).then((res)=>{
                // console.log(res.data)
                this.category_data=res.data.list;
                // 显示左侧列表数据的同时右边也对应显示
                this.getDateList(res.data.list[this.index].id)
            })
        },

        // 显示右侧的详细信息
        getDateList(id){
            get("/product/pageQuery",{
                page:1,
                pageSize:999,
                productCategoryId:id
            }).then((res)=>{
                // console.log(res.data.list)
                this.data_lists=res.data.list
            })
        },

        //更改订单数量计算价格
        update_sum(e){
            let id=e.id;//购买的ID
            this.orderLines[id]=e;//保存购买的商品
            this.sum=0;//每次更新数量的时候总价归0
            for(let item in this.orderLines){
                this.sum+=this.orderLines[item].price*this.orderLines[item].number*100;
            }
        },

        onSubmit(){
            // 序列化
            var json_str = JSON.stringify(this.orderLines)
            // console.log(json_str)
            if(!this.sum==0){
                this.$router.push({path:'/orderconfirm',query:{data:json_str}})
            }
        }
        
    },

    created(){
        this.getCateData();
    }


};
</script>